import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { ConfigProvider, message } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { setMessageApi } from './utils/message';
import './App.css';

// 认证Provider - 这是关键！
import { AuthProvider } from './hooks/useAuth';

// 手机端页面
import MobileLayout from './components/Mobile/Layout';
import MobileHome from './pages/Mobile/Home';
import MobileLogin from './pages/Mobile/Login';
import MobileCategory from './pages/Mobile/Category';
import MobileCart from './pages/Mobile/Cart';
import MobileProfile from './pages/Mobile/Profile';
import ProductDetail from './pages/Mobile/ProductDetail';
import OrderConfirm from './pages/Mobile/OrderConfirm';
import OrderDetail from './pages/Mobile/OrderDetail';
import PaymentSuccess from './pages/Mobile/PaymentSuccess';
import Orders from './pages/Mobile/Orders';
import Favorites from './pages/Mobile/Favorites';
import History from './pages/Mobile/History';
import CategoryProducts from './pages/Mobile/CategoryProducts';
import Payment from './pages/Mobile/Payment';
import AddressManagement from './pages/Mobile/AddressManagement';
import PointsCenter from './pages/Mobile/PointsCenter';
import AfterSaleApply from './pages/Mobile/AfterSaleApply';
import AfterSaleDetail from './pages/Mobile/AfterSaleDetail';
import AfterSaleLogistics from './pages/Mobile/AfterSaleLogistics';

// 管理端页面
import AdminLayout from './components/Admin/Layout';
import AdminLogin from './pages/Admin/Login';
import AdminDashboard from './pages/Admin/Dashboard';
import AdminProducts from './pages/Admin/Products';
import AdminCategories from './pages/Admin/Categories';
import AdminOrders from './pages/Admin/Orders';
import AdminRefunds from './pages/Admin/Refunds';
import AdminUsers from './pages/Admin/Users';
import AdminAdminUsers from './pages/Admin/AdminUsers';
import AdminRoles from './pages/Admin/Roles';
import AdminLogs from './pages/Admin/Logs';
import AdminProfile from './pages/Admin/Profile';
import AfterSales from './pages/Admin/AfterSales';


// 路由守卫组件
import { PrivateRoute } from './components/PrivateRoute';

function App() {
  const [messageApi, contextHolder] = message.useMessage();
  
  // 设置全局message API
  React.useEffect(() => {
    setMessageApi(messageApi);
  }, [messageApi]);

  return (
    <ConfigProvider locale={zhCN}>
      {contextHolder}
      {/* 关键修改：用 AuthProvider 包裹整个应用 */}
      <AuthProvider>
        <Router>
          <div className="App">
            <Routes>
              {/* 默认重定向到手机端 */}
              <Route path="/" element={<Navigate to="/app" replace />} />
              
              {/* 手机端路由 */}
              <Route path="/app" element={<MobileLayout />}>
                <Route index element={<MobileHome />} />
                <Route path="category" element={<MobileCategory />} />
                <Route path="category/:categoryId" element={<CategoryProducts />} />
                <Route path="cart" element={<MobileCart />} />
                <Route path="profile" element={<MobileProfile />} />
                <Route path="product/:id" element={<ProductDetail />} />
                <Route path="order/confirm" element={<OrderConfirm />} />
                <Route path="order/:id" element={<OrderDetail />} />
                <Route path="orders" element={<Orders />} />
                <Route path="favorites" element={<Favorites />} />
                <Route path="history" element={<History />} />
                <Route path="address" element={<AddressManagement />} />
                <Route path="points" element={<PointsCenter />} />
                <Route path="payment" element={<Payment />} />
                <Route path="payment/success" element={<PaymentSuccess />} />
                <Route path="after-sale/apply/:orderId" element={<AfterSaleApply />} />
                <Route path="after-sale/:afterSaleId" element={<AfterSaleDetail />} />
                <Route path="after-sale/logistics/:afterSaleId" element={<AfterSaleLogistics />} />
              </Route>
              
              {/* 手机端登录页面（独立布局） */}
              <Route path="/app/login" element={<MobileLogin />} />
              
              {/* 管理端路由 */}
              <Route path="/admin/login" element={<AdminLogin />} />
              <Route 
                path="/admin" 
                element={
                  <PrivateRoute>
                    <AdminLayout />
                  </PrivateRoute>
                }
              >
                <Route index element={<AdminDashboard />} />
                <Route path="products" element={<AdminProducts />} />
                <Route path="categories" element={<AdminCategories />} />
                <Route path="orders" element={<AdminOrders />} />
                <Route path="refunds" element={<AdminRefunds />} />
                <Route path="users" element={<AdminUsers />} />
                <Route path="admin-users" element={<AdminAdminUsers />} />
                <Route path="roles" element={<AdminRoles />} />
                <Route path="logs" element={<AdminLogs />} />
                <Route path="profile" element={<AdminProfile />} />
                <Route path="after-sales" element={<AfterSales />} />
              </Route>
            </Routes>
          </div>
        </Router>
      </AuthProvider>

    </ConfigProvider>
  );
}

export default App;